<template>
	<div id="FillOrder">
		<x-header :left-options="{showBack:false}" title="填写订单" class="header">
			<a slot="left" @click="back()"><i class="tp-icon icon-back-white"></i></a>
		</x-header>
		<!--用户信息-->
		<div class="user-info" @click="showAddress()">
			<div class="user-info-left">
				<div class="user-info-address-name-box">
					<span class="user-info-name">{{defaultAdress.receiver_name}}</span>
					<span class="user-info-mobile">{{tel}}</span>
					<button class="user-info-default">默认</button>
				</div>
				<p class="user-info-address">{{defaultAdress.receiver_province}}{{defaultAdress.receiver_city}}{{defaultAdress.receiver_county}}{{defaultAdress.receiver_address}}</p>
			</div>
			<router-link to="">
				<i class="tp-icon icon-back-white"></i>
			</router-link>
		</div>
		<!--订单信息-->
		<div class="order-info-box">
			<div class="order-info" v-for="(shop,shopIndex) in goods_cart_list">
				<!--店铺-->
				<div class="order-info-header">
					<i class="tp-icon mall-shop"></i>
					<p>{{shop.shop.shop_name}}</p>
					<i class="tp-icon icon-right"></i>
				</div>
				<!--商品信息-->
				<div class="order-good-box" v-for="(item,index) in shop.goods_list" data-cart-id="item.cart_id">
					<!--图片-->
					<div class="order-good-info">
						<!--<img class="good-img" :src="item.goods.goods_thumb" />-->
						<div class="order-good-info-right">
							<p class="good-title">{{item.goods_name}}</p>
							<p class="good-spec">规格尺寸：如意平安 新籽9mm*7mm</p>
							<div class="good-price-box">
								<p class="good-price"><span>¥</span>{{item.goods_price}}</p>
								<span class="good-num">x{{item.goods_num}}</span>
							</div>
						</div>
					</div>
					<!--商品数量-->
					<div class="buy-num-box">
						<span class="buy-num-t">购买数量</span>
						<div class="modify-good-num">
							<span class="reduce-btn" @click="reduceNum(shopIndex,index,item.goods_num)"></span>
							<input type="text" v-model="item.goods_num">
							<span class="add-btn" @click="addNum(shopIndex,index,item.goods_num)"></span>
						</div>
					</div>
					<!--优惠券-->
					<div class="coupons-box">
						<span class="coupons-t">优惠券</span>
						<span class="coupons-num">无可用</span>
						<i class="tp-icon icon-right"></i>
					</div>
					<!--配送方式-->
					<div class="way-box">
						<span class="way-t">配送方式</span>
						<span class="way-type">快递&nbsp;&nbsp;免邮</span>
						<i class="tp-icon icon-right"></i>
					</div>
					<!--发票-->
					<div class="invoice-box">
						<span class="invoice-t">发票</span>
						<span class="no-invoice" v-if="item.mall_goods.goods_vat==1" @click="invoice(item.commodity_id)">本次支持开发票</span>
						<span class="no-invoice" v-else @click="invoice(item.commodity_id)">本次不支持开发票</span>
						<i class="tp-icon icon-right"></i>
					</div>
					<!--买家留言-->
					<div class="buyer-message-box">
						<span class="buyer-t">买家留言:</span>
						<input type="text" placeholder="选填:给卖家留下你想说的话" class="buyer-txt" />
					</div>
					<!--小计-->
					<div class="sub-total-box">
						<span class="total-t">小计</span>
						<p><span>¥</span>{{item.goods_price*item.goods_num}}</p>
					</div>

				</div>
			</div>
		</div>

		<div class="footer">
			<div class="real-pay-box">
				<span class="real-pay-t">实付款：</span>
				<p><span>¥&nbsp;</span>{{sum_price}}</p>
			</div>
			<div class="sub-btn" @click="sumbit()">
				提交订单
			</div>
		</div>
		<!--遮罩层-->
		<div class="mask-layer-box" v-show="maskShow" @click="maShow()"></div>
		<!--选择地址-->
		<div class="choose-address-box" v-show="addShow">
			<div class="choose-address-item" v-for="(item,index) in address" @click="chooseAdress(index)">
				<img src="../images/address.png" class="AdressIcon" v-if="item.receiver_default==1" />
				<img src="../images/address2.png" class="AdressIcon" v-else />
				<div class="choose-add-top">
					<span class="choose-add-name" :class="{'address-active':item.receiver_default==1}">{{item.receiver_name}}</span>
					<span class="choose-add-tel" :class="{'address-active':item.receiver_default==1}">{{item.receiver_tel}}</span>
				</div>
				<p class="address-info" :class="{'address-active':item.receiver_default==1}">{{item.receiver_province}}{{item.receiver_city}}{{item.receiver_county}}{{item.receiver_address}}</p>
			</div>
		</div>
	</div>
</template>

<script>
	import $ from 'jquery'
	import { XHeader } from 'vux'
	export default {
		data() {
			return {
				num: 0,
				cart_ids: '',
				goods_cart_list: '',
				goods_list: [],
				sum_price: 0.00,
				commodity_id: [],
				tel: '',
				address: '', //全部地址
				defaultAdress: '' ,//存儲默认地址
				maskShow:false,
				addShow:false
			}
		},
		components: {
			XHeader
		},
		mounted() {
			this.getParms();
			this.getGood();
			this.getAdress();
		},
		methods: {
			//返回
			back: function() {
				window.history.go(-1);
			},
			//获取地址
			getAdress: function() {
				this.$http({
					method: 'GET',
					url: "/los/api/member/receiver_list.json",
				}).then((res) => {
					res = res.data;
					let that = this;
					this.address = res.list;
					console.log(this.address);
					$.each(this.address, function(index) {
						//判断默认地址
						if(this.receiver_default == 1) {
							that.defaultAdress = this;
							that.tel = this.receiver_tel.substr(0, 3) + '****' + this.receiver_tel.substr(7);
							console.log(that.tel);
						}
					})
				}).catch((err) => {
					console.log(err)
				})
			},
			//获取传来的商品id的数据
			getGood: function() {
				let that = this;
				//this.cart_ids=[];

				console.log('//////' + this.cart_ids)
				//				this.cart_ids.push('23')
				//				this.cart_ids.push('10')
				console.log(this.cart_ids)
				this.$http.get('/los/api/mall_member/cart_list.json', {
					params: {
						cart_ids: this.cart_ids
					}
				}).then((result) => {
					this.goods_cart_list = result.data.data.goods_cart_list;
					let that = this;
					//计算初始总价钱
					$.each(this.goods_cart_list, function(index) {
						$.each(this.goods_list, function(index2) {
							that.sum_price += this.goods_price * this.goods_num;
						})
					})
				}).catch((err) => {
					console.log(err);
				})
			},
			//接受参数
			getParms: function() {
				let routerParms = this.$route.query.cart_ids;
				alert(routerParms);
				this.cart_ids = routerParms;
			},
			addNum: function(index1, index2) {
				var goods_list = this.goods_cart_list[index1].goods_list[index2];
				var cart_id = goods_list.cart_id;
				var num = ++goods_list.goods_num;
				let params = {
					cart_id: cart_id,
					goods_num: num
				}
				this.$http({
					method: 'POST',
					url: '/los/api/mall_member/cart_num.json',
					data: params
				}).then((res) => {
					this.sum_price += parseInt(goods_list.goods_price);
				}).catch((err) => {
					console.log(err);
				})
			},
			reduceNum: function(index1, index2, num) {
				var goods_list = this.goods_cart_list[index1].goods_list[index2];
				//				var num = goods_list.goods_num;
				var cart_id = goods_list.cart_id;
				console.log(num);

				if(num <= 1) {
					num = 1;
				} else {
					var num = --goods_list.goods_num;
					let params = {
						cart_id: cart_id,
						goods_num: num
					}
					this.$http({
						method: 'POST',
						url: '/los/api/mall_member/cart_num.json',
						data: params
					}).then((res) => {
						console.log(num);
						this.sum_price -= parseInt(goods_list.goods_price);
					}).catch((err) => {
						console.log(err);
					})

					//					this.sum_price -= parseInt(goods_list.goods_price);

				}
			},
			//发票
			invoice: function(id) {
				this.$router.push({
					name: "Invoice",
					query: {
						commodity_id: id
					}
				})
			},
			maShow:function(){
				this.maskShow=false;
				this.addShow=!this.addShow;
			},
			//显示选择地址
			showAddress:function(){
				this.maskShow=true;
				this.addShow=true;
			},
			//选择地址
			chooseAdress:function(index){
			$.each(this.address,function(){
				this.receiver_default=0;
			})
			this.address[index].receiver_default=1;
			this.defaultAdress=this.address[index];
			this.maskShow=false;
			this.addShow=false;
			},
			sumbit: function() {
				let params = {
					cart_ids: this.cart_ids
				}
				this.$http({
					method: 'POST',
					url: '/los/api/mall_member/cart_order.json',
					data: params
				}).then((res) => {
					let pay_sn = res.data.data.wxpay.pay_sn;
					console.log(pay_sn);
//					location.href = '#/PayOrder/pay_sn/' + pay_sn;
					this.$router.push({
						name:'PayOrder',
						query:{
							pay_sn:pay_sn,
							receiver_id:this.defaultAdress.receiver_id
						}
					})
				}).catch((err) => {
					console.log(err);
				})

			}
		},
	}
</script>

<style scoped lang="less" scoped="scoped">
	#FillOrder {
		padding-bottom: 2rem;
		background: #F5F5F5;
		.header {
			height: 1.17rem;
			background: linear-gradient(90deg, rgba(238, 76, 87, 1) 0%, rgba(231, 74, 104, 1) 100%);
			.vux-header-title {
				font-size: 0.45rem;
				color: #FFFFFF !important;
			}
		}
	}
	
	.user-info {
		position: relative;
		padding: 0.66rem 0.4rem;
		background: linear-gradient(90deg, rgba(238, 76, 87, 1) 0%, rgba(231, 74, 104, 1) 100%);
		.user-info-left {
			.user-info-name {
				color: #FFFFFF;
				font-size: 0.48rem;
				margin-right: 0.4rem;
			}
			.user-info-address-name-box {
				display: flex;
				align-items: center;
			}
			.user-info-mobile {
				color: #FFFFFF;
				font-size: 0.48rem;
				margin-right: 0.26rem;
			}
			.user-info-default {
				width: 1.04rem;
				height: 0.42rem;
				line-height: 0.42rem;
				text-align: center;
				border: 1px solid rgba(255, 255, 255, 1);
				border-radius: 0.21rem;
				background: transparent;
				font-size: 0.29rem;
				color: #FFFFFF;
				outline: none;
			}
			.user-info-address {
				width: 8.24rem;
				overflow: hidden;
				white-space: nowrap;
				font-size: 0.37rem;
				color: #FFFFFF;
				font-weight: 400;
				opacity: 0.7;
				margin-top: 0.4rem;
			}
		}
		i {
			position: absolute;
			right: 0.4rem;
			margin-top: -0.24rem;
			top: 50%;
			opacity: 0.5;
			transform: rotate(180deg);
		}
	}
	/*订单信息*/
	
	.order-info-box {
		background: linear-gradient(rgba(238, 76, 87, 1), #F5F5F5, #F5F5F5, #F5F5F5, #F5F5F5, #F5F5F5);
		.order-info:first-child {
			border-top-left-radius: 0.26rem;
			border-top-right-radius: 0.26rem;
		}
		.order-info {
			padding: 0 0.4rem;
			background: #FFFFFF;
			margin-bottom: 0.26rem;
			/*店铺*/
			.order-info-header {
				background: #FFFFFF;
				display: flex;
				align-items: center;
				width: 100%;
				padding: 0.48rem 0;
				position: relative;
				i:first-child {
					width: 0.37rem;
					height: 0.37rem;
				}
				i:last-child {
					width: 0.26rem;
					height: 0.26rem;
				}
				p {
					font-size: 0.34rem;
					color: #222222;
					margin-left: 0.22rem;
					margin-right: 0.18rem;
				}
			}
			.order-info-header:after {
				position: absolute;
				content: "";
				bottom: 0;
				width: 8.53rem;
				right: 0;
				border: 1px solid #EEEEEE;
				transform: scaleY(0.5);
			}
			/*商品信息*/
			.order-good-box {
				.order-good-info {
					padding: 0.4rem 0;
					background: #FFFFFF;
					position: relative;
					display: flex;
					align-items: center;
					.good-img {
						width: 2.05rem;
						height: 2.05rem;
						margin-right: 0.21rem;
					}
					.order-good-info-right {
						flex: 1;
						.good-title {
							font-size: 0.34rem;
							color: #222222;
						}
						.good-spec {
							display: inline-block;
							font-size: 0.32rem;
							color: #999999;
							padding: 0.16rem 0.12rem;
							background: #F8F8F8;
							margin-top: 0.2rem;
							margin-bottom: 0.4rem;
						}
						.good-price-box {
							font-family: "微软雅黑";
							display: flex;
							width: 100%;
							align-items: center;
							.good-price {
								font-size: 0.48rem;
								color: #DD2835;
								flex: 1;
								span {
									font-size: 0.3rem;
								}
							}
							.good-num {
								font-size: 0.37rem;
								color: #222222;
							}
						}
					}
				}
				.order-good-info:after {
					content: "";
					position: absolute;
					width: 100%;
					height: 1px;
					background: #EEEEEE;
					bottom: 0;
					left: 0;
					transform: scaleY(0.5);
				}
				/*购买数量*/
				.buy-num-box,
				.coupons-box,
				.way-box,
				.buyer-message-box,
				.sub-total-box,
				.invoice-box {
					background: #FFFFFF;
					display: flex;
					align-items: center;
					position: relative;
					padding: 0.45rem 0;
					.buy-num-t,
					.total-t,
					.invoice-t {
						font-size: 0.37rem;
						color: #222222;
						flex: 1;
					}
					.modify-good-num {
						display: flex;
						align-items: center;
						width: 2.08rem;
						padding: 0.08rem;
						border: 1px solid #E6E6E6;
						border-radius: 0.37rem;
						span {
							display: inline-block;
							width: 0.56rem;
							height: 0.56rem;
							background: #E6E6E6;
							border-radius: 50%;
							position: relative;
						}
						.reduce-btn:before,
						.add-btn:before {
							content: "";
							position: absolute;
							width: 0.26rem;
							height: 2px;
							top: 50%;
							left: 50%;
							margin-top: -1px;
							margin-left: -0.13rem;
							background: #666666;
						}
						.add-btn:after {
							content: "";
							position: absolute;
							width: 2px;
							height: 0.26rem;
							top: 50%;
							left: 50%;
							margin-top: -0.13rem;
							margin-left: -1px;
							background: #666666;
						}
						label {
							flex: 1;
							text-align: center;
						}
						input {
							width: 0.5rem;
							text-align: center;
							flex: 1;
						}
					}
				}
				.buy-num-box:after,
				.coupons-box:after,
				.way-box:after,
				.buyer-message-box:after,
				.sub-total-box:after,
				.way-box:after,
				.invoice-box :after {
					position: absolute;
					content: "";
					bottom: 0;
					left: 0;
					width: 100%;
					height: 1px;
					background: #EEEEEE;
					transform: scaleY(0.5);
				}
				/*优惠卷*/
				.coupons-box {
					.coupons-t {
						color: #222222;
						font-size: 0.37rem;
						flex: 1;
					}
					.coupons-num {
						font-size: 0.37rem;
						color: #999999;
						margin-right: 0.21rem;
					}
					i {
						height: 0.28rem;
						width: 0.28rem;
					}
				}
				/*配送方式*/
				.way-box {
					.way-t {
						flex: 1;
					}
					.way-t,
					.way-type {
						font-size: 0.37rem;
						color: #222222;
					}
					.way-type {
						margin-right: 0.21rem;
					}
					i {
						width: 0.28rem;
						height: 0.28rem;
					}
				}
				/*买家留言*/
				.buyer-message-box {
					.buyer-t {
						font-size: 0.37rem;
						color: #222222;
					}
					.buyer-txt {
						font-size: 0.37rem;
						color: #999999;
						flex: 1;
					}
				}
				/*小计*/
				.sub-total-box {
					.total-t {
						color: #DD2835;
					}
					p {
						font-size: 0.45rem;
						color: #DD2835;
						span {
							font-size: 0.34rem;
						}
					}
				}
				/*发票*/
			}
		}
	}
	
	.footer {
		position: fixed;
		height: 1.44rem;
		display: flex;
		padding-left: 0.4rem;
		align-items: center;
		bottom: 0;
		width: 100%;
		.real-pay-box {
			display: flex;
			align-items: center;
			flex: 1;
			.real-pay-t {
				font-size: 0.37rem;
				color: #222222;
			}
			p {
				span {
					font-size: 0.34rem;
				}
				font-size: 0.45rem;
				color: #DD2835;
			}
		}
		.sub-btn {
			width: 2.98rem;
			height: 1.44rem;
			background: #DD2835;
			color: #FFFFFF;
			font-size: 0.4rem;
			text-align: center;
			line-height: 1.44rem;
		}
	}
	/*遮罩层*/
	
	.mask-layer-box {
		position: fixed;
		z-index: 1000;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.5);
	}
	/*选择地址*/
	
	.choose-address-box {
		position: fixed;
		width: 100%;
		border-top-left-radius: 0.34rem;
		border-top-right-radius: 0.34rem;
		padding: 0.4rem 0;
		bottom: 0;
		z-index: 10001;
		background: #FFFFFF;
		.choose-address-item {
			position: relative;
			padding: 0 0.6rem 0.2rem 0.8rem;
			.AdressIcon {
				width: 0.53rem;
				height: 0.53rem;
				position: absolute;
				left: 0.135rem;
				top: 38%;
			}
			.choose-add-top {
				.choose-add-name {
					font-size: 0.34rem;
					color: #222222;
					margin-right: 0.26rem;
				}
				.choose-add-tel {
					font-size: 0.26rem;
					color: #999999;
					align-self: flex-end;
				}
			}
			.address-info {
				font-size: 0.34rem;
				color: #222222;
				padding: 0.26rem 0;
			}
		}
		/*.choose-address-item:after {
			content: "";
			position: absolute;
			bottom: 0;
			width: 90%;
			height: 1px;
			background: #666666;
			left: 5%;
			transform: scaleY(0.5);
		}*/
	}
	.address-active{
		color: #A30000 !important;
	}
</style>
<style type="text/css">
	.header.vux-header .vux-header-title span {
		color: #FFFFFF;
	}
</style>